<script setup lang="ts">
import { ref } from 'vue'

// const activeIndex = ref('1')
// const activeIndex2 = ref('1')
// const handleSelect = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }

import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from '@element-plus/icons-vue'

function getAssetsImages(name: string) {
  return new URL(`/src/assets/${name}`, import.meta.url).href
}

const handClick = () => {
  useRoute()
}
</script>
<template>
  <div>
    <el-row class="aui-nav" justify="space-around">
      <el-col :span="4">
        <el-image
          class="logo"
          style="width: 100px; height: 70px"
          :src="getAssetsImages('logo.png')"
          fit="contain"
        ></el-image>
      </el-col>

      <el-col :span="12" class="nav-item">
        <div>
          <span class="nav-title">数据集</span>
        </div>
        <div>
          <!--        <span class="nav-title">在线Oj</span>-->
          <el-dropdown class="drop" :hide-on-click="false">
            <span class="el-dropdown-link">
              在线Oj<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus"
                  ><router-link to="/home/problemView"
                    >浏览题目</router-link
                  ></el-dropdown-item
                >
                <el-dropdown-item :icon="Plus"
                  ><router-link to="/home/addProblem"
                    >添加题目</router-link
                  ></el-dropdown-item
                >
                <el-dropdown-item :icon="CirclePlusFilled"
                  ><router-link to="/home/problemSubmitView"
                    >查看题目列表</router-link
                  ></el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div>
          <el-dropdown class="drop" :hide-on-click="false">
            <span class="el-dropdown-link">
              图像分类<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus">医学图像分类</el-dropdown-item>
                <el-dropdown-item :icon="CirclePlusFilled"
                  >水果图像分类</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div>
          <el-dropdown class="drop" :hide-on-click="false">
            <span class="el-dropdown-link">
              图像分割<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="CirclePlusFilled"
                  >CamVid图像分割</el-dropdown-item
                >
                <el-dropdown-item :icon="CirclePlusFilled"
                  >Cityscape图像分割</el-dropdown-item
                >
                <el-dropdown-item :icon="CirclePlusFilled"
                  >VOC图像分割</el-dropdown-item
                >
                <el-dropdown-item :icon="Plus"
                  >心脏医学图像分割</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div>
          <span class="nav-title">目标检测</span>
        </div>
        <div>
          <el-dropdown class="drop" :hide-on-click="false">
            <span class="el-dropdown-link">
              你好呀<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
                <el-dropdown-item :icon="CirclePlusFilled"
                  >Action 2</el-dropdown-item
                >
                <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
                <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
                <el-dropdown-item :icon="CircleCheck"
                  >Action 5</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="btn">
          <el-button>登录</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
  <!-- <el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  :ellipsis="false"
  @select="handleSelect"
>
  <el-menu-item index="0">LOGO</el-menu-item>
  <div class="flex-grow" />
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-sub-menu index="2">
    <template #title>Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
    <el-menu-item index="2-3">item three</el-menu-item>
    <el-sub-menu index="2-4">
      <template #title>item four</template>
      <el-menu-item index="2-4-1">item one</el-menu-item>
      <el-menu-item index="2-4-2">item two</el-menu-item>
      <el-menu-item index="2-4-3">item three</el-menu-item>
    </el-sub-menu>
  </el-sub-menu>
</el-menu> -->
</template>
<style lang="scss" scoped>
.aui-nav {
  width: 100%;
  height: 70px;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  justify-content: center;

  //flex: 1;
}

.nav-item div {
  //width: 20%;
  //display: flex;
  flex: 1;
  height: 70px;
}

.nav-item div:hover {
  color: #000;
  font-weight: 500;
  background-color: #f5f5f5;
}

.nav-item div :focus-visible {
  outline: none;
}

span {
  font-size: 15px !important;
  //font-family: Inter-Regular, Inter;
  font-weight: 400;
  color: #000;
  height: 70px;
  line-height: 70px;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.drop {
  width: 100%;
  height: 70px;
}

.btn {
  height: 70px;
  line-height: 70px;
  margin: auto;
}
</style>
